<template>
    <div class="app-container">
        <span style="font-size: 26px; margin-right: 160px; margin-left: -60px; color: black;">
            种植补贴金额标准
        </span>

        <el-row :gutter="24">
            <el-form ref="elForm" size="large" label-width="200px" label-position="left">
                <!-- 玉米 -->
                <div class="card-container">
                    <el-card class="infoDiv">
                        <span class="corner-label">玉米补贴标准</span>
                        <el-row :gutter="15" style="margin-top: 40px;">
                            <el-col :span="18" >
                                <el-form-item label="2025年玉米种植每亩补贴金额标准（元）" label-width="440px">
                                    <el-input v-model="form.yumi" type="number" placeholder="请输入" 
                                        @input="updateSubmitState('yumi')" :disabled="isSubmitted.yumi"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-button :loading="loading.yumi" :type="buttonType.yumi" :disabled="!canSubmit.yumi"
                                    @click="submitOne('yumi', '玉米补贴')" style="top:1000px;padding: 10px 40px;">
                                    {{ buttonText.yumi }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

                <!-- 大豆 -->
                <div class="card-container">
                    <el-card class="infoDiv">
                        <span class="corner-label">大豆补贴标准</span>
                        <el-row :gutter="15" style="margin-top: 40px;">
                            <el-col :span="18" >
                                <el-form-item :label="`${year}年大豆种植每亩补贴金额标准（元）`" label-width="440px">
                                    <el-input v-model="form.dadou" type="number" placeholder="请输入" 
                                        @input="updateSubmitState('dadou')" :disabled="isSubmitted.dadou"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-button :loading="loading.dadou" :type="buttonType.dadou" :disabled="!canSubmit.dadou"
                                    @click="submitOne('dadou', '大豆补贴')" style="padding: 10px 40px;">
                                    {{ buttonText.dadou }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

                <!-- 稻谷 -->
                <div class="card-container">
                    <el-card class="infoDiv">
                        <span class="corner-label">稻谷地表水补贴标准</span>
                        <el-row :gutter="15" style="margin-top: 40px;">
                            <el-col :span="18" >
                                <el-form-item :label="`${year}年稻谷地表水种植每亩补贴金额标准（元）`" label-width="440px">
                                    <el-input v-model="form.daogudibiao" type="number" placeholder="请输入" 
                                        @input="updateSubmitState('daogudibiao')" :disabled="isSubmitted.daogudibiao"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-button :loading="loading.daogudibiao" :type="buttonType.daogudibiao" :disabled="!canSubmit.daogudibiao"
                                    @click="submitOne('daogudibiao', '稻谷地表水补贴')" style="padding: 10px 40px;">
                                    {{ buttonText.daogudibiao }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

                <div class="card-container">
                    <el-card class="infoDiv">
                        <span class="corner-label">稻谷地下水补贴标准</span>
                        <el-row :gutter="15" style="margin-top: 40px;">
                            <el-col :span="18" >
                                <el-form-item :label="`${year}年稻谷地下水种植每亩补贴金额标准（元）`" label-width="440px">
                                    <el-input v-model="form.daogudixia" type="number" placeholder="请输入" 
                                        @input="updateSubmitState('daogudixia')" :disabled="isSubmitted.daogudixia"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-button :loading="loading.daogudixia" :type="buttonType.daogudixia" :disabled="!canSubmit.daogudixia"
                                    @click="submitOne('daogudixia', '稻谷地下水补贴')" style="padding: 10px 40px;">
                                    {{ buttonText.daogudixia }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
                <!-- 高油大豆 -->
                <div class="card-container">
                    <el-card class="infoDiv">
                        <span class="corner-label">高油大豆补贴标准</span>
                        <el-row :gutter="15" style="margin-top: 40px;">
                            <el-col :span="18" >
                                <el-form-item :label="`${year}年高油大豆种植每亩补贴金额标准（元）`" label-width="440px">
                                    <el-input v-model="form.gaoyoudadou" type="number" placeholder="请输入" 
                                        @input="updateSubmitState('gaoyoudadou')"
                                        :disabled="isSubmitted.gaoyoudadou"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-button :loading="loading.gaoyoudadou" :type="buttonType.gaoyoudadou"
                                    :disabled="!canSubmit.gaoyoudadou" @click="submitOne('gaoyoudadou', '高油大豆补贴')"
                                    style="padding: 10px 40px;">
                                    {{ buttonText.gaoyoudadou }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div><!-- 高蛋白大豆 -->
                <div class="card-container">
                    <el-card class="infoDiv">
                        <span class="corner-label">高蛋白大豆补贴标准</span>
                        <el-row :gutter="15" style="margin-top: 40px;">
                            <el-col :span="18" >
                                <el-form-item :label="`${year}年高蛋白大豆种植每亩补贴金额标准（元）`" label-width="440px">
                                    <el-input v-model="form.gaodanbaidadou" type="number" placeholder="请输入" 
                                        @input="updateSubmitState('gaodanbaidadou')"
                                        :disabled="isSubmitted.gaodanbaidadou"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-button :loading="loading.gaodanbaidadou" :type="buttonType.gaodanbaidadou"
                                    :disabled="!canSubmit.gaodanbaidadou" @click="submitOne('gaodanbaidadou', '高蛋白大豆补贴')"
                                    style="padding: 10px 40px;">
                                    {{ buttonText.gaodanbaidadou }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

                <!-- 耕地地力补贴 -->
                <div class="card-container">
                    <el-card class="infoDiv">
                        <span class="corner-label">耕地地力补贴标准</span>
                        <el-row :gutter="15" style="margin-top: 40px;">
                            <el-col :span="18" >
                                <el-form-item :label="`${year}年耕地地力每亩补贴金额标准（元）`" label-width="440px">
                                    <el-input v-model="form.farmland" type="number" placeholder="请输入" 
                                        @input="updateSubmitState('farmland')"
                                        :disabled="isSubmitted.farmland"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-button :loading="loading.farmland" :type="buttonType.farmland"
                                    :disabled="!canSubmit.farmland" @click="submitOne('farmland', '耕地地力补贴')"
                                    style="padding: 10px 40px;">
                                    {{ buttonText.farmland }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>

                <!-- 耕地轮作补贴 -->
                <div class="card-container">
                    <el-card class="infoDiv">
                        <span class="corner-label">耕地轮作补贴标准</span>
                        <el-row :gutter="15" style="margin-top: 40px;">
                            <el-col :span="18" >
                                <el-form-item :label="`${year}年耕地轮作每亩补贴金额标准（元）`" label-width="440px">
                                    <el-input v-model="form.cropfarmland" type="number" placeholder="请输入" 
                                        @input="updateSubmitState('cropfarmland')"
                                        :disabled="isSubmitted.cropfarmland"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6" >
                                <el-button :loading="loading.cropfarmland" :type="buttonType.cropfarmland"
                                    :disabled="!canSubmit.cropfarmland" @click="submitOne('cropfarmland', '耕地轮作补贴')"
                                    style="padding: 10px 40px;">
                                    {{ buttonText.cropfarmland }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-card>
                </div>
            </el-form>
        </el-row>
    </div>
</template>
  
<script>
import { savePrice, getPrice } from "@/api/agriculture/agriculture";

export default {
    data() {
        const now = new Date();
        return {
            year: now.getFullYear(),
            curyear: now.getFullYear() - 1,
            loading: {
                yumi: false,
                dadou: false,
                // daogu: false,
                daogudibiao:false,
                daogudixia:false,
                gaodanbaidadou: false,
                gaoyoudadou: false,
                farmland:false,
                cropfarmland:false,
            },
            form: {
                yumi: undefined,
                dadou: undefined,
                // daogu: undefined,
                daogudibiao:false,
                daogudixia:false,
                gaodanbaidadou: undefined,
                gaoyoudadou: undefined,
                farmland:undefined,
                cropfarmland:undefined,
            },
            isSubmitted: {
                yumi: false,
                dadou: false,
                // daogu: false,
                daogudibiao:false,
                daogudixia:false,
                gaodanbaidadou: false,
                gaoyoudadou: false,
                farmland:false,
                cropfarmland:false,
            },
            canSubmit: {
                yumi: false,
                dadou: false,
                // daogu: false,
                daogudibiao:false,
                daogudixia:false,
                gaodanbaidadou: false,
                gaoyoudadou: false,
                farmland:false,
                cropfarmland:false,

            },
            buttonText: {
                yumi: '提交',
                dadou: '提交',
                // daogu: '提交',
                daogudibiao:'提交',
                daogudixia:'提交',
                gaodanbaidadou: '提交',
                gaoyoudadou: '提交',
                farmland:'提交',
                cropfarmland:'提交',
            },
            buttonType: {
                yumi: 'primary',
                dadou: 'primary',
                // daogu: 'primary',
                daogudibiao:'primary',
                daogudixia:'primary',
                gaodanbaidadou: 'primary',
                gaoyoudadou: 'primary',
                farmland:'primary',
                cropfarmland:'primary',
            }
        };
    },

    mounted() {
        this.fetchPriceData();
    },

    methods: {
        // 获取已保存的数据
        fetchPriceData() {
            getPrice({year:this.year})
                .then(res => {
                    const data = res || [];
                    console.log("补贴金额",data);
                    const mapping = {
                        '玉米补贴': 'yumi',
                        '大豆补贴': 'dadou',
                        '稻谷地表水补贴': 'daogudibiao',
                        '稻谷地下水补贴': 'daogudixia',
                        // '稻谷补贴': 'daogu',
                        '高蛋白大豆补贴': 'gaodanbaidadou',
                        '高油大豆补贴': 'gaoyoudadou',
                        '耕地地力补贴':'farmland',
                        '耕地轮作补贴':'cropfarmland',
                    };

                    data.forEach(item => {
                        const field = mapping[item.type];
                        console.log("补贴字段",field);
                        if (field) {
                            // 填充值（注意：price 可能是字符串）
                            this.form[field] = Number(item.price);
                            // 标记为已提交
                            this.isSubmitted[field] = true;
                            this.buttonText[field] = '已提交';
                            this.buttonType[field] = 'info';
                            this.canSubmit[field] = false;
                        }
                    });

                    // 初始化未提交项的状态
                    this.initSubmitStates();
                })
                .catch(err => {
                    this.$message.error('获取补贴数据失败：' + (err.message || '网络错误'));
                    this.initSubmitStates(); // 出错时仍允许编辑
                });
        },

        // 更新提交按钮状态（是否可提交）
        updateSubmitState(field) {
            const value = this.form[field];
            const isEmpty = value == null || value === '' || isNaN(Number(value));

            if (!this.isSubmitted[field]) {
                this.canSubmit[field] = !isEmpty;
            }
        },

        // 初始化所有字段状态
        initSubmitStates() {
            Object.keys(this.form).forEach(key => {
                this.updateSubmitState(key);
            });
        },

        // 提交单个补贴
        submitOne(field, type) {
            const value = this.form[field];
            if (value == null || value === '' || isNaN(Number(value))) {
                this.$message.error(`${type}金额不能为空或非数字`);
                return;
            }

            const postData = {
                year: this.year,
                type: type,
                price: String(value)
            };

            this.loading[field] = true;

            savePrice(postData)
                .then(() => {
                    this.$modal.msgSuccess(`${type}金额保存成功`);
                    // 锁定状态
                    this.isSubmitted[field] = true;
                    this.buttonText[field] = '已提交';
                    this.buttonType[field] = 'info';
                    this.canSubmit[field] = false;
                })
                .catch(err => {
                    this.$message.error(`${type}保存失败：${err.message || '未知错误'}`);
                })
                .finally(() => {
                    this.loading[field] = false;
                });
        }
    }
};
</script>
  
<style scoped>
/* 放大表单项的 label 文字 */
::v-deep .el-form-item__label{
    font-size: 20px;
}
::v-deep .el-input__inner{
    font-size: 20px;
    width: 150px;
}

.card-container .el-button {
    font-size: 20px !important;
    /* padding: 10px 40px; 可选：保持按钮内边距协调 */
}



.app-container {
    width: 80%;
    margin-left: 10%;
}

.card-container {
    position: relative;
    margin-top: 40px;
}

.infoDiv {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-top: 20px;
    padding-top: 20px;
    font-size: 30px;
}

.corner-label {
    position: absolute;
    top: 0;
    left: 0;
    background: #81B337;
    color: white;
    padding: 2px 8px;
    font-size: 20px;
    border-radius: 4px;
    transform: translate(-10%, -10%);
    z-index: 1;
}
</style>